I can make changes like these and double check on the contrast. I thought it was good, but Firefox is not letting me sample outline colors and since some are not explicit (eg lighten by 10%) I may have used the wrong color codes.

I want to double check on something. This is just for focus on links. In "regular" use (not keyboard navigation), you see the outline for a moment when you click a link and not at other times. If you are keyboard tabbing, you will see the outline and it lingers. So for the keyboard navigator, that intensity could be helpful, and for the non-keyboard navigator it's only visible for a flash. I just want to check that in light of that, you still feel it's too thick.

I can live with it I suppose if you really think that 2 pixels is not enough. I use keyboard navigation frequently, and so it is prevalent for me. In addition, there are numerous instance where focus persists on a link after a mouse click. For example, if you click on one of the instructor help links as in this screen shot:

After the help dialog closes the focus remains on the help link.

Also, one thing that you can do in the scss files is add a line like @debug lighten($link-hover-color, 30%). Then when you run the generate-assets.js script it will output the resulting value in the terminal.

Thanks, that will help. And I can see now just making these changes only apply to the nav links.

I think you maybe noted this, but with the green theme, the ratio between the non-active background and the active background is 8.63, less than 9. That makes it impossible to have an outline color that is at a ratio above 3 with each of them. So I may need to darken the green active background color.

Do you mean to darken the primary green? That should be fine.

Yes that's what I mean.

In the yellow theme, the contrast ratio between the active nav link (primary yellow) and non-active nav links (off white) is only 1.48. I'm not going to change anything about it, but thought I'd mention it. But unless you object, I would make the focus outline color have ratio at last 3 with each of those.

Perhaps (one day) we should offer each user the option to select a theme that works for them, with whatever accessibility concerns they have.

I was aware of the ratio for the primary color for the math4-yellow theme. If you can make the focus outline color have a ratio of 3 with both that should be good.

@Alex-Jordan: I rebased my branch that this is based on, and that caused conflicts. I wasn't thinking about this dependent pull request, and shouldn't have done that. In any case I fixed the conflicts. So you may need to pull to get those changes. Sorry.

OK, this is all updated.

• 2px width for outline, and only within the site nav
• almost all the contrast ratios for nav link background, nav link active background, and focus outline, are above 3:1. The one exception is with the yellow theme for nav link background with nav link active background.
• cleand up hr css